<template>
  <div class="itemdetail">
    <Header></Header>
    <div class="top">
      <div class="searchbox">
        <el-input type="text" placeholder="请输入" v-model="input"></el-input>
        <el-button @click="search()">搜淘宝</el-button>
      </div>
    </div>
    <div class="middle">
      <div class="middle-left">
        <el-image :src="`http://localhost:8080/api/v1/images/${item.imageDir}/thumbnail.jpg`"></el-image>
      </div>
      <div class="middle-right" style="margin-left: 30px">
        <div style="margin:10px;font-size: 30px;">{{item.name}}</div>
        <div style="margin:10px;font-size: 20px;
      font-weight: bolder;
      color: rgb(110, 110, 110);
      background-color: #ffe4d0;">{{item.description}}</div>
        <div style="margin:10px;font-size: 30px;
      font-weight: bolder;
      color: #e7511d;">￥{{item.price}}</div>
        <div class="middle-right-num"><el-input-number :min="1" :max="item.amount" v-model="num"></el-input-number>（库存{{item.amount}}件）</div>
        <div class="middle-right-button">
          <el-button
            style="
              width: 170px;
              height: 50px;
              color: #e7511d;
              background-color: #ffe4d0;
            "
            @click="toPay()"
            >立即购买</el-button
          >
          <el-button
            icon="el-icon-shopping-cart-2"
            style="
              width: 200px;
              height: 50px;
              color: white;
              background-color: #ff4400;
            "
            @click="addCart()"
            >加入购物车</el-button
          >
        </div>
      </div>
    </div>
    <div class="bottom">
    <el-tabs type="card">
    <el-tab-pane label="宝贝详情">宝贝详情</el-tab-pane>
    <el-tab-pane label="累计评论">累计评论</el-tab-pane>
  </el-tabs>
    </div>
    </div>
</template>

<script>
import Header from '@/components/Header.vue'

export default {
  components: {
    Header
  },
  data () {
    return {
      item: {},
      input: '',
      num: 1
    }
  },
  mounted () {
    if (this.$route.query) {
      const itemId = this.$route.query.item
      if (this.$cookie.get('userInfo')) {
        this.$http.get(`items/${itemId}`, {
          params: {
            userId: JSON.parse(this.$cookie.get('userInfo')).userId
          }
        }).then((res) => {
          this.item = res.data
          console.log(res)
        }).catch((err) => {
          console.log(err.response)
        })
      } else {
        this.$http.get(`items/${itemId}`).then((res) => {
          this.item = res.data
          console.log(res)
        }).catch((err) => {
          console.log(err.response)
        })
      }
    }
  },
  methods: {
    search () {
      if (this.input) {
        this.$router.push({ path: 'Search', query: { input: this.input, type: '宝贝' } })
      }
    },
    toPay () {
      if (!this.$cookie.get('userInfo')) {
        this.$router.push('/Login')
      }
      const list = []
      const item = {
        item: this.item,
        userId: JSON.parse(this.$cookie.get('userInfo')).userId,
        amount: this.num
      }
      list.push(item)
      this.$router.push({ name: 'Pay', params: { list: list } })
    },
    addCart () {
      if (!this.$cookie.get('userInfo')) {
        this.$router.push('/Login')
      }
      const item = {
        userId: JSON.parse(this.$cookie.get('userInfo')).userId,
        itemId: this.item.itemId,
        amount: this.num
      }
      this.$http.post('cart', JSON.stringify(item), {
        params: {
          userId: JSON.parse(this.$cookie.get('userInfo')).userId
        }
      }).then((res) => {
        console.log(res)
      }).catch((err) => {
        console.log(err.response)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 50px;
  margin: 20px 0;
  .searchbox {
    width: 500px;
    position: absolute;
    right: 50px;
    display: inline-block;
    /deep/ .el-input {
      border-style: solid;
      border-color: #FF4400;
      width: 300px;
    }
    /deep/ .el-button {
      color: #ff4400;
      background-color: #ffe4d0;
      min-height: 47px;
      margin-left: 3px;
    }
  }
}
.middle {
  width: 70%;
  margin: 0 auto;
  display: flex;
  .middle-left {
    /deep/ .el-image {
      width: 400px;
      height: 400px;
    }
  }
  .middle-right {
    height: 400px;
    background-color: rgb(245, 239, 229);
    span {
      display: inline-block;
      margin: 10px 30px;
    }
    .middle-right-num {
      margin: 40px 0 50px 30px;
    }
    .middle-right-button {
      width: 80%;
      margin:10px auto;
      display: flex;
      justify-content: space-between;
      .el-button {
        font-size: 20px;
      }
    }
  }
}
.bottom {
  width: 70%;
  margin: 20px auto;
  /deep/ .el-tabs__item.is-active {
    color: #f40;
  }
  /deep/ .el-tabs__item:hover {
    color: #f40;
  }
}
</style>
